/**
* 基础菜单 活动管理 用户满减
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'#'}">活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户满减</el-breadcrumb-item>
    </el-breadcrumb>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中"
      style="width: 100%;margin-top: 20px;">
      <!-- <el-table-column align="center" type="selection" width="60">
      </el-table-column> -->
      <el-table-column align="center" sortable type="index" label="序号" width="120">
      </el-table-column>
      <el-table-column align="center" label="优惠卷名称" width="300">
        <template slot-scope="scope">
          <div>满{{scope.row.full}}减{{scope.row.reduce}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="nickname" label="用户昵称" width="100">
      </el-table-column>
      <el-table-column align="center" prop="coupon_status_name" label="状态" width="450">
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="32%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="满多少" prop="full">
          <el-input size="small" v-model="editForm.full" auto-complete="off" placeholder="请输入满多少"></el-input>
        </el-form-item>
        <el-form-item label="减多少" prop="reduce">
          <el-input size="small" v-model="editForm.reduce" auto-complete="off" placeholder="请输入减多少"></el-input>
        </el-form-item>
        <el-form-item label="有效天数" prop="day">
          <el-input size="small" type="number" v-model="editForm.day" auto-complete="off" placeholder="请输入有效天数" style="width: 70%;"></el-input>&nbsp;&nbsp;天
        </el-form-item>
        <el-form-item label="生效时间">
          <el-date-picker type="daterange" v-model="editForm.dateList" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="margin-bottom: 14px;" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm(title)">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    UserCouponList,
  } from '../../api/adminMG'
  import {
    getStore
  } from '../../utils/util'
  import Pagination from '../../components/Pagination'
  export default {
    data() {
      return {
        category: [],
        show_sku: 1,
        nshow: true, //switch开启
        fshow: false, //switch关闭
        loading: false, //是显示加载
        editFormVisible: false, //控制编辑页面显示与隐藏
        title: '添加',
        editForm: {
          full:'',
          reduce:'',
          day:'',
          dateList:[]
          // token: localStorage.getItem('logintoken')
        },
        listData: [],
        // rules表单验证
        rules: {
          full: [{
            required: true,
            message: '请输入满多少',
            trigger: 'blur'
          }],
          reduce: [{
            required: true,
            message: '请输入减多少',
            trigger: 'blur'
          }],
          day: [{
            required: true,
            message: '请输入有效天数',
            trigger: 'blur'
          }],
          listData: [{
            required: true,
            message: '请选择日期',
            trigger: 'blur'
          }]
        },
        formInline: {
          page: 1,
          limit: 10,
          varLable: '',
          varName: '',
          token: localStorage.getItem('logintoken')
        },
        userparm: [], //搜索权限
        listData: [], //用户数据
        // 分页参数
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 10
        }
      }
    },
    // 注册组件
    components: {
      Pagination
    },
    /**
     * 数据发生改变
     */

    /**
     * 创建完毕
     */
    created() {
      // this.getdata(this.formInline);
      this.getUserCouponList();
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      //获取用户满减列表
      getUserCouponList(parameter) {
        var that = this;
        UserCouponList(parameter)
          .then(res => {
            this.loading = false
            if (res.status == 0) {
              this.$message({
                type: 'success',
                message: "获取数据成功"
              })
              console.log("请求用户满减列表", res.data.userCouponList)
              that.listData = res.data.userCouponList;
              if (this.listData.length > 0) {
                this.show_input = true
              } else {
                this.$message({
                  showClose: true,
                  message: "暂无用户满减",
                  type: "warning"
                });
              }
            } else {
              this.$message({
                type: 'warning',
                message: "获取用户满减列表失败"
              })
            }
          })
          .catch(err => {
            this.loading = false
            this.$message.error('用户满减加载失败，请稍后再试！')
          })
      },
      // 分页插件事件
      callFather(parm) {
        this.formInline.page = parm.currentPage
        this.formInline.limit = parm.pageSize
        this.getdata(this.formInline)
      },
      // 搜索事件
      search() {
        this.getdata(this.formInline)
      },
      //显示编辑界面
      handleEdit: function(index, row) {
        this.editFormVisible = true
        if (row != undefined && row != 'undefined') {
          this.title = '编辑'
          this.editForm.coupon_id = row.coupon_id
          this.editForm.full = row.full
          this.editForm.reduce = row.reduce
          this.editForm.day = row.day
          this.editForm.dateList[0] = row.start_time
          this.editForm.dateList[1] = row.end_time
        } else {
          this.title = '添加'
          this.editForm = {}
        }
      },
      // 编辑、增加页面保存方法
      submitForm(editData) {
        console.log("editData", editData)
        let couponData = {};
        couponData.full = this.editForm.full
        couponData.reduce = this.editForm.reduce
        couponData.day = this.editForm.day
        couponData.staff_id = getStore('staffInfo').staff_id;
        couponData.start_time = this.editForm.dateList[0];
        couponData.end_time = this.editForm.dateList[1];
        console.log("获取满减表单", couponData)
        if(editData == '添加'){
          this.addCoupon(couponData);
        }else if(editData == '编辑'){
          couponData.coupon_id = this.editForm.coupon_id
          this.updateCoupon(couponData);
        }
      },
      //满减添加
      addCoupon(couponData){
        CouponAdd(couponData)
          .then(res => {
            this.editFormVisible = false
            this.loading = false
            console.log("满减添加", res)
            if (res.data.result) {
              this.$message({
                type: 'success',
                message: "满减添加成功"
              })
              this.getCouponList();
            } else {
              this.$message({
                type: 'warning',
                message: "满减添加失败"
              })
            }
          })
          .catch(err => {
            this.editFormVisible = false
            this.loading = false
            this.$message.error('满减添加失败，请稍后再试！')
          })
      },
      //满减编辑
      updateCoupon(couponData){
        // console.log("获取满减表单111", couponData)
        // return false
        CouponUpdate(couponData)
          .then(res => {
            this.editFormVisible = false
            this.loading = false
            console.log("满减编辑", res)
            if (res.data.result) {
              this.$message({
                type: 'success',
                message: "满减编辑成功"
              })
              this.getCouponList();
            } else {
              this.$message({
                type: 'warning',
                message: "满减编辑失败"
              })
            }
          })
          .catch(err => {
            this.editFormVisible = false
            this.loading = false
            this.$message.error('满减编辑失败，请稍后再试！')
          })
      },
      // 删除满减
      deleteCoupon(index, row) {
        this.$confirm('确定要删除吗?', '信息', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            CouponDelete(row.coupon_id)
              .then(res => {
                console.log("满减删除", res)
                if (res.data.result) {
                  this.$message({
                    type: 'success',
                    message: "满减删除成功"
                  })
                  this.getCouponList();
                } else {
                  this.$message({
                    type: 'warning',
                    message: "满减删除失败"
                  })
                }
              })
              .catch(err => {
                this.loading = false
                this.$message.error('满减删除失败，请稍后再试！')
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      // 关闭编辑、增加弹出框
      closeDialog() {
        this.editFormVisible = false
      }
    }
  }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }
</style>
